import React from 'react';

export class Counter extends React.Component {
  // Javascript 中 class 内代码，是默认运行在严格模式下的
  constructor() {
    // 初始化 this
    super();
    // 组件实例上的私有数据
    this.state = {
      count: 10,
    };
  }

  // 事件处理函数
  // 注意这里 handleClick 只在实例上。
  handleClick = () => {
    console.log('this=>', this);
    // 修改页面状态
    this.setState({ count: this.state.count + 10 });
  };

  render() {
    console.log('这是组件实例对象', this);
    return (
      <div>
        <h1>计数器: {this.state.count}</h1>
        <button onClick={this.handleClick}>+10</button>
      </div>
    );
  }
}
